const path = require('path');
const HTMLWebPackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HTMLWebPackPlugin({
  template: path.join(__dirname, './src/index.html'),
  filename: 'index.html'
})
module.exports = {
  mode: 'development',
  plugins: [
    htmlPlugin
  ],
  module: {
    rules: [
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/},
      // css-loader?modules 追加参数，表示为普通css样式表启用模块化
      { 
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      // 处理字体文件
      {test: /\.ttf|woff|woff2|eot|svg$/, use: "url-loader"},
      {test: /\.scss|sass$/, use: [
        {loader: "style-loader"},
        {loader: "css-loader", options: {
          modules: {
            localIdentName: '[path][name]__[local]--[hash:base64:5]'
          }
        }},
        {loader:  "sass-loader"}
      ]}
    ]
  },
  resolve: {
    // 文件后缀为以下几个时可不写
    extensions: ['.js', '.jsx', 'json'],
    alias: {
      // 可以使用@符号来代替src目录
      '@': path.join(__dirname, './src')
    }
  }
}